<!DOCTYPE html>  <!-- 文档类型声明标签，告诉浏览器这个页面采取HTML5版本来显示-->
<html lang="en"> <!--语言种类声明 en定义语言为英文，zh-Cn为中文-->
<head>
    <meta charset="UTF-8"> <!--编码方式，还有GB2312(简体中文)、BIG5(繁体中文)、GBK(国标)-->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn_Web</title>
</head>
<body>
    <!--标题标签(head的缩写)：每个标题标签都会独占一行，加大加粗，一共六级-->
    <h1>我是一级标签</h1>
    <h3>我是三级标签</h3>
    <h6>我是六级标签</h6>

    <!--段落标签(paragraph)：将网页分为若干个段落，文本在一个段落中会根据浏览器窗口的大小自动换行-->
    <p>这是第一段</p>
    <p>This is the first paragraph!</p>
    <!--换行标签(break):单标签，强制换行，-->
    <br />

    <!--文本格式化标签：粗体、斜体、下划线等-->
    <!--都推荐使用第一种标签，语义更强烈-->
    <strong>加粗</strong>
    <b>另一种加粗</b>
    <em>倾斜</em>
    <i>另一种倾斜</i>
    <del>删除线</del>
    <s>另一种删除线</s>
    <ins>下划线</ins>
    <u>另一种下划线</u>

    <!--盒子标签：没有语义，用来装内容-->
    <div>division：分割，分区</div>
    <!--div:独占一行,大盒子-->
    <span>span：跨度，跨距</span>
    <!--span:一行可以有多个span，小盒子-->

    <!--图像标签(image)：插入图像
    1、可以有多个属性，但是必须写在标签名的后面
    2、属性是不分先后顺序的，属性和属性中间均有空格分开
    3、属性的格式：属性=“属性值”-->
    <!--src：图像的路径和文件名 | alt：如果图片无法正常显示，将使用其中的文本代替-->
    <img src="img/赵四.jpg" alt="图片丢失" />‘
    <img src="img/赵四.jpg" title="鼠标放到图像上提示的文字" />
    <!--width:宽度 ｜ height:高度 ｜ border:图像边框的粗细-->

    <!--路径：页面中的图片会非常多，通常我们会新建一个文件夹来存放这些文件，这时再查找图像，就需要采用路径的方式来指定图像的位置-->
    <!--路径可以分为相对路径和绝对路径。-->
    <!--相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，就是图片相对与HTML页面的位置。同一级：img.jpg | 下一级：img/img.jpg | 上一级：../img.jpg-->
    <!--绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。或者网络上的绝对路径。例如：D:/Users/Leon/Desktop/....../img.jpg-->

    <!--超链接标签：从一个页面跳转到另一个页面-->
    <a href="http://www.baidu.com" target="blank">跳转到百度</a>
    <!--target: 默认值是self，在当前窗口中打开。blank，在新窗口中打开-->
    <a href="#">空链接，当没有确定链接目标时，可先用#代替</a>
    <!--下载链接，href中是文件的地址-->
    <a href="img/赵四.jpg">下载文件</a>
    <!--锚点链接：快速定位到本页面的某一位置-->
    <a href="#id_name">锚点链接</a>

    
</body>
</html>